import {Button, Image, Switch} from 'antd';
import {PageContainer} from "@ant-design/pro-layout";
import ProTable from "@ant-design/pro-table";
import Compile from "@/pages/Management/Delivery/Courier/components/Compile";
import AddCourier from "@/pages/Management/Delivery/Courier/components/AddCourier"
import Deletes from "@/pages/Management/components/Deletes"
import {useState} from "react";
import {delivery} from "@/services/ant-design-pro/management";

export default () => {
  const [ isShowEdit, setIsShowEdit ] = useState(false);
  const [ DeletesIsShowEdit, setDeletesIsShowEdit ] = useState(false);
  const [ isShowAdd, setisShowAdd ] = useState(false);
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      align: "center",
      width: 60,
    },
    {
      title: '微信名称',
      dataIndex: 'nickname',
      search: false,
      align: "center",
      width: 200,
    },
    {
      title: '头像',
      dataIndex: 'pic',
      align: "center",
      width: 200,
      search:false,
      render: (_,record) => {
        return (
          <Image
            width={50}
            src={record.avatar}
          />)
      }
    },
    {
      title: '名称',
      dataIndex: 'nickname',
      align: "center",
      width: 200,
    },
    {
      title: '手机号码',
      width: 200,
      dataIndex: 'phone',
      align: "center",
      search: false,
    },
    {
      title: '是否显示',
      align: "center",
      dataIndex: 'status',
      search: false,
      render: (_,record) => (
        <Switch  checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      )
    },
    {
      title: '添加时间',
      width: 400,
      dataIndex: 'create_at',
      align: "center",
      search: false,
    },
    {
      title: '操作',
      align: "center",
      valueType: 'option',
      render: (_,record) => [
        <a onClick={() =>{setIsShowEdit(true)}}>编辑</a>,
        <a onClick={() =>{setDeletesIsShowEdit(true)}}>删除</a>,
      ],
    },
  ];
  return (
    <PageContainer
      header={ {
        breadcrumb: {},
      }}
    >
      <div style={ {background: 'white', padding: '15px'}}>
        <Button type="primary" onClick={()=>{setisShowAdd(true)}}>添加配送员</Button>
      </div>
      <ProTable
        columns={columns}
        editable={ {
          type: 'multiple',
        } }
        request={async (params = {}) =>{
          let {data, meta} = await delivery()
          return {
            data,
            success: true,
            total: meta.total
          }
        }}
        rowKey="id"
        search={ {
          labelWidth: 'auto',
        }}
        pagination={ {
          pageSize: 5,
        }}
        dateFormatter="string"
      />
      <Compile edit={isShowEdit} setEdit={setIsShowEdit}/>
      <Deletes isshow={DeletesIsShowEdit} setisshow={setDeletesIsShowEdit}/>
      <AddCourier isedit={isShowAdd} issetEdit={setisShowAdd} />
    </PageContainer>
  );
};
